<template> 
    <div>
        <h1>{{ msg }}</h1>
        <h1>翻转后的字符串：{{ msg.split("").reverse().join("") }}</h1>
        <h1>翻转后的字符串（方法）：{{revMsg()  }}</h1>
        <h1>翻转后的字符串（方法）：{{revMsg()  }}</h1>
        <h1>翻转后的字符串（方法）：{{revMsg()  }}</h1>
        <h1>翻转后的字符串（计算属性）：{{revMsgPlus  }}</h1>
        <h1>翻转后的字符串（计算属性）：{{revMsgPlus  }}</h1>
        <h1>翻转后的字符串（计算属性）：{{revMsgPlus  }}</h1>

    </div>
</template>

<script>
import{computed, ref} from"vue"
export default{
    name:'ReverseComponent',
    components:{
    },
    setup(){
        const msg = ref("Hello vue.js")
        // const revMsg = function(){
        //     return msg.value.split("").reverse().join("")
        // }
        const revMsg = () => {
            console.log("方法触发")
            return msg.value.split("").reverse().join("")
        }
        const revMsgPlus = computed(()=>{
            console.log("计算属性触发")
            return msg.value.split("").reverse().join("")
        })
        return{
            msg,
            revMsg,
            revMsgPlus
        }
    }
}
</script>

<style></style>